<template>
  <div
    class="spirit"
    @click="spiritClick"
    :class="{ disable: disable }"
    :style="style"
  >
    <i :class="value.spirit.icon"></i>
  </div>
</template>

<script>
export default {
  name: "hello-spirit",
  props: {
    value: {
      type: Object,
      default: () => {},
    },
    disable: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  computed: {
    style() {
      return this.value.style;
    },
  },
  mounted() {},

  methods: {
    spiritClick() {
      this.$emit("click", this.value);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.spirit {
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 1px solid yellow;
  padding: 6px;
  text-align: center;
  font-size: 1.8em;
  background-color: blue;
  color: #fff;
}
.disable {
  background-color: #aaa;
}
</style>
